<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>监测列表</title>
<link rel="stylesheet" href="/css/index.css" type="text/css">
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/echarts.min.js"></script>

</head>
<body>
 <div class="teas-top">用户最后一日使用监护仪统计数据</div>
<div class="pieList">
	<ul>
		<li>
			<p id="read">阅读时长：0分钟</p>
			<h2>平均单次阅读时长</h2>
			<div id="main" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="outdoors">户外时长：0小时</p>
			<h2>户外总时长</h2>
			<div id="main1" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="distance_least">阅读距离：0厘米</p>
			<h2>平均阅读距离</h2>
			<div id="main2" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="light_least">阅读光照：0lux</p>
			<h2>平均阅读光照</h2>
			<div id="main3" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="look_phone">看手机时长：0分钟</p>
			<h2>平均看手机时长</h2>
			<div id="main4" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="look_tv">看电脑时长：0分钟</p>
			<h2>平均看电脑时长(分钟)</h2>
			<div id="main5" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="tilte">坐姿倾斜度：0°</p>
			<h2>平均坐姿倾斜度</h2>
			<div id="main6" style="width: 100%;height:200px;"></div>
		</li>
		<li>
			<p id="use_jianhuyi">有效使用监护仪总时长：0小时</p>
			<h2>有效使用监护仪总时长</h2>
			<div id="main7" style="width: 100%;height:200px;"></div>
		</li>
	</ul>
</div>
   
   
</body>
</html>

<script type="text/javascript" th:inline="javascript">
	var name =  [[${name}]];
	var idCard =  [[${idCard}]];
	window.onload=function (){
		$.ajax({
			cache: true,
			type: "GET",
			async: false,
			url: '/xinshineng/jianhuyi/GetData?name='+name+'&idCard='+idCard,
			error: function (request) {
				parent.layer.alert("网络超时");
			},
			success: function (data) {
				if (data==null || data=='null' || data==''){
					alert('未使用监护仪，暂无数据');
					history.go(-1);
				}
				var read = parseFloat(data.read);
				var outdoors = parseFloat(data.outdoors);
				var distance_least = parseFloat(data.distance_least);
				var light_least = parseFloat(data.light_least);
				var look_phone = parseFloat(data.look_phone);
				var look_tv = parseFloat(data.look_tv);
				var tilte = parseFloat(data.tilte);
				var use_jianhuyi = parseFloat(data.use_jianhuyi);

				var readLeavl = read<=20?'优':read<=40?'良':read<=90?'差':'极差';
				var outdoorsLeavl = outdoors>=2?'优':outdoors>=1?'良':outdoors>=0.5?'差':'极差';
				var distance_leastLeavl = distance_least>=33?'优':distance_least>=30?'良':distance_least>=20?'差':'极差';
				var light_leastLeavl = light_least>=300?'优':data.light_least>=250?'良':light_least>=200?'差':'极差';
				var look_phoneLeavl = look_phone<=10?'优':look_phone<=20?'良':look_phone<=40?'差':'极差';
				var look_tvLeavl = look_tv<=20?'优':look_tv<=40?'良':look_tv<=60?'差':'极差';
				var tilteLeavl = tilte<=5?'优':tilte<=10?'良':tilte<=15?'差':'极差';
				var use_jianhuyiLeavl = use_jianhuyi>=10?'优':use_jianhuyi>=8?'良':use_jianhuyi>=5?'差':'极差';

				$("#read").text('阅读时长：'+read+'分钟('+readLeavl+')');
				$("#outdoors").text('户外时长：'+outdoors+'小时('+outdoorsLeavl+')');
				$("#distance_least").text('阅读距离：'+distance_least+'厘米('+distance_leastLeavl+')');
				$("#light_least").text('阅读光照：'+light_least+'lux('+light_leastLeavl+')');
				$("#look_phone").text('看手机时长：'+look_phone+'分钟('+look_phoneLeavl+')');
				$("#look_tv").text('看电脑时长：'+look_tv+'分钟('+look_tvLeavl+')');
				$("#tilte").text('坐姿倾斜度：'+tilte+'°('+tilteLeavl+')');
				$("#use_jianhuyi").text('有效使用监护仪总时长：'+use_jianhuyi+'小时('+use_jianhuyiLeavl+')');
			}
		})
	}

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	var myChart1 = echarts.init(document.getElementById('main1'));
	var myChart2 = echarts.init(document.getElementById('main2'));
	var myChart3 = echarts.init(document.getElementById('main3'));
	var myChart4 = echarts.init(document.getElementById('main4'));
	var myChart5 = echarts.init(document.getElementById('main5'));
	var myChart6 = echarts.init(document.getElementById('main6'));
	var myChart7 = echarts.init(document.getElementById('main7'));

	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 12, name: '优'},
						{value: 42, name: '良'},
						{value: 0, name: '中'},
						{value: 22, name: '差'},
						{value: 11, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 73, name: '优'},
						{value: 0, name: '良'},
						{value: 0, name: '中'},
						{value: 0, name: '差'},
						{value: 0, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart1.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 6, name: '优'},
						{value: 6, name: '良'},
						{value: 0, name: '中'},
						{value: 50, name: '差'},
						{value: 15, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart2.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 46, name: '优'},
						{value: 24, name: '良'},
						{value: 0, name: '中'},
						{value: 4, name: '差'},
						{value: 3, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart3.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 34, name: '优'},
						{value: 0, name: '良'},
						{value: 0, name: '中'},
						{value: 0, name: '差'},
						{value: 0, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart4.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 63, name: '优'},
						{value: 0, name: '良'},
						{value: 0, name: '中'},
						{value: 0, name: '差'},
						{value: 0, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart5.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 0, name: '优'},
						{value: 14, name: '良'},
						{value: 0, name: '中'},
						{value: 40, name: '差'},
						{value: 23, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart6.setOption(option);
	
	// 指定图表的配置项和数据
	var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				itemWidth:20,
				itemHeight:10,
				orient: 'vertical',
				left: 10,
				data: ['优', '良', '中', '差', '极差']
			},
			series: [
				{
					name: '用户上次使用各等级人数',
					type: 'pie',
					radius: ['50%', '65%'],
					center:["50%","45%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '30',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 0, name: '优'},
						{value: 0, name: '良'},
						{value: 0, name: '中'},
						{value: 44, name: '差'},
						{value: 33, name: '极差'}
					]
				}
			]
		};

	// 使用刚指定的配置项和数据显示图表。
	myChart7.setOption(option);
</script>

